<template>
  <a-row :gutter="10">
    <a-col>
      <a-card>
        <a-row style="margin-bottom: 10px">
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="品牌">
                <a-select
                  style="width: 180px"
                  placeholder="请选择品牌"
                  @change="selectChange"
                  v-model="brand"
                  allow-clear
                >
                  <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
                  <a-select-option
                    :value="item.value"
                    v-for="item in brandList"
                    :key="item.code"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="分类">
                <!--   -->
                <a-select
                  style="width: 180px"
                  placeholder="请选择分类"
                  @change="handeleSelectChange"
                  v-model="categoryName"
                  allow-clear
                >
                  <a-spin
                    v-if="fetching"
                    slot="notFoundContent"
                    size="small"
                  />
                  <a-select-option
                    :value="item.name"
                    v-for="item in categories"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="元素名称">
                <a-input
                  placeholder="请输入名称"
                  v-model="name"
                  allow-clear
                ></a-input>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
                <a-button
                  type="primary"
                  @click="loadData(1)"
                  style="margin-left: 10px"
                >重置</a-button>
                <a-button
                  type="primary"
                  style="margin-left: 10px"
                  @click="add(null)"
                >新增</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>

        <!-- <a-table
          bordered
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :scroll="{ x: true }"
          @change="handleTableChange"
        >
          <template slot="image" slot-scope="txt, record">
            <img style="width: auto; height: 50px" @click="prevImg(record.url)" :src="record.url" alt="" />
          </template>
          <template slot="action" slot-scope="txt, record">
            <a class="mr-10" @click="add(record)"><a-icon type="edit" />编辑</a>
            <a class="mr-10" @click="deleteRecord(record)"><a-icon type="delete" />删除</a>
          </template>
        </a-table> -->
        <create
          v-if="showAdd"
          :element="element"
          @close="close"
        ></create>
        <a-modal
          v-model="visible"
          title="图片预览"
          @ok="visible = false"
          :footer="null"
          width="60%"
          :mask="true"
        >
          <div class="previmg">
            <img :src="prevImageUrl" />
          </div>
        </a-modal>
      </a-card>
    </a-col>
    <a-col
      :md="24"
      :sm="24"
    >
      <a-card
        :style="{ marginTop: '24px' }"
        class="list-content"
      >
        <div
          class="ant-pro-pages-list-projects-cardList"
          style="clear: both"
        >
          <!-- :grid="{ xxl: 6, xl: 6, lg: 4, md: 3, sm: 2, xs: 1 }" -->
          <a-list
            :loading="loading"
            :data-source="dataSource"
            :grid="{ gutter: 0 }"
          >
            <div
              v-if="showLoadingMore"
              slot="loadMore"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-spin v-if="loadingMore" />
              <a-button
                v-else
                @click="onLoadMore"
              > loading more </a-button>
            </div>
            <a-list-item
              slot="renderItem"
              slot-scope="item"
            >
              <a-card
                style="cursor: pointer"
                class="ant-pro-pages-list-projects-card"
                hoverable
              >
                <img
                  slot="cover"
                  :src="item.url ? item.url : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                  :alt="item.name"
                  @click="prevImg(item.url)"
                />
                <div class="cardItemContent">
                  <h3>元素名称:{{ item.name }}</h3>
                  <p class="title">分类名称:{{ item.categoryName }}</p>
                  <p class="title">品牌:{{ item.brand }}</p>
                  <!-- <p class="title">工号:{{item.jobNumber}}</p> -->
                  <p class="price">{{ item.description }}</p>
                </div>
                <template
                  slot="actions"
                  class="ant-card-actions"
                >
                  <div style="display: flex">
                    <a-button
                      type="link"
                      @click="add(item)"
                      block
                    >
                      <a-icon type="edit" />编辑
                    </a-button>
                    <a-button
                      type="link"
                      style="color: red"
                      @click="deleteRecord(item)"
                      block
                    >
                      <a-icon type="delete" />删除
                    </a-button>
                  </div>
                </template>
              </a-card>
            </a-list-item>
          </a-list>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import create from './create.vue'
import { listMixin } from '../util/listMixin'
import debounce from 'lodash/debounce'
import { queryFull, pattern, getSystemPro } from '@api/pattern/index.js'
import { postAction } from '@api/manage.js'
// const columns = [
//   {
//     title: '元素名称',
//     dataIndex: 'name',
//     width: 200,
//   },
//   {
//     title: '分类名称',
//     dataIndex: 'categoryName',
//     width: 200,
//   },
//   {
//     title: '描述',
//     dataIndex: 'description',
//   },
//   {
//     title: '图片',
//     scopedSlots: { customRender: 'image' },
//   },
//   {
//     title: '操作',
//     scopedSlots: { customRender: 'action' },
//   },
// ]
export default {
  mixins: [listMixin],

  components: {
    create
  },

  data() {
    this.handleSearch = debounce(this.handleSearch, 800)
    return {
      // columns,
      categories: [],
      categoryId: '',
      showAdd: false,
      loading: false,
      element: null,
      current: 1,
      pageSize: 10,
      prevImageUrl: '',
      visible: false,
      showLoadingMore: false,
      loadingMore: false,
      urlKey: 'element',
      fetching: false,
      value: undefined,
      brandList: [],
      categoryName: undefined
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  mounted() {
    this.getBrandList()
  },
  created() {
    const { categoryName } = this.$route.query
    this.categoryName = categoryName || undefined
    console.log(this.$route.query)
    this.$nextTick(() => {
      this.form.setFieldsValue({
        categoryId
      })
    })
    this.handleSearch()
  },

  methods: {
    async getBrandList() {
      const data = {
        jobNumber: this.jobNumber
      }
      try {
        const res = await getSystemPro('brand', data)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      } catch (error) {
        this.$message.error(error.msg || '出错了')
      }
    },
    selectChange(brand) {
      this.brand = brand
      this.handleSearch()
    },
    handeleSelectChange(categoryName) {
      this.categoryName = categoryName
    },
    // 加载更多
    onLoadMore() {
      this.loadingMore = true
      this.current += 1
      this.loadData(2)
    },
    // loadData(arg) {
    //   if (!this.urlKey || this.urlKey == '') {
    //     this.$message.error('请设置url.list属性!')
    //     return
    //   }
    //   var params = this.getQueryParams() //查询条件
    //   if (this.categoryName) {
    //     params.categoryName = this.categoryName
    //   }
    //   //加载数据 若传入参数1则加载第一页的内容
    //   if (arg === 2) {
    //     params.current = this.current
    //   }else{
    //     params.current = 1
    //     this.form.resetFields();
    //   }
    //   if (this.jobNumber) {
    //   params.jobNumber = this.jobNumber
    //   // params.size = 16
    // }
    //   console.log(params, '参数')
    //   postAction(`${pattern}${this.urlKey}/list`, params).then((res) => {
    //     if (res.code == 200) {
    //       //update-end---author:wsp    Date:20210826
    //       this.current = res.data.current
    //       this.currentTotal = this.current * this.pageSize
    //       const dataList = res.data.records
    //       this.dataSource = res.data.current === 1? res.data.records : this.dataSource.concat(dataList)
    //       if (res.data.total > res.data.size) {
    //         this.showLoadingMore = true
    //       } else {
    //         this.showLoadingMore = false
    //       }
    //       this.loadingMore = false
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //     this.loading = false
    //   })
    // },
    prevImg(url) {
      if (typeof url == 'string' && url != '') {
        this.prevImageUrl = url
        this.visible = true
      }
    },
    close(values, operate, categoryName) {
      console.log(operate)
      console.log(categoryName)
      this.showAdd = false
      if (operate == 0) {
        this.loadData()
      } else {
        this.dataSource.map(item => {
          if (item.id == values.id) {
            item.categoryId = values.categoryId
            item.categoryName = categoryName
            item.brand = values.brand
            item.description = values.description
            item.name = values.name
          }
        })
      }
      console.log(this.dataSource)
      // this.loadData( )
    },
    add(ele) {
      this.showAdd = true
      this.element = ele
    },
    async handleSearch(value) {
      this.categories = []
      this.fetching = true
      const params = {
        brand: this.brand,
        jobNumber: this.jobNumber,
        elementFlag: 0
      }
      const res = await queryFull('category', params)
      this.fetching = false
      if (res.code == 200) {
        this.categories = res.data
      }
    }
  }
}
</script>

<style scoped lang="less">
@import './less/index.less';
.mr-10 {
  margin-right: 10px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
</style>

